*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100%;
}
section{
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #000000;
    /*
    animation 属性是一个简写属性，用于设置六个动画属性：
    animation-name          ---->规定需要绑定到选择器的 keyframe 名称
    animation-duration      ---->规定完成动画所花费的时间，以秒或毫秒计 (默认值是 0，意味着没有动画效果) 
    animation-timing-function   ----> 规定动画的速度曲线   (linear -->动画从头到尾的速度是相同的    ease->默认值，动画以低速开始，然后加快，在结束前变慢)
    animation-delay         ---->规定在动画开始之前的延迟  （定义动画开始前等待的时间，以秒或毫秒计。默认值是 0）
    animation-iteration-count   ---->规定动画应该播放的次数  (infinite)
    animation-direction     ---->规定是否应该轮流反向播放动画  (normal-->默认值。动画应该正常播放  alternate-->动画应该轮流反向播放)
    */
    /* !用于不断改变颜色 */
    animation: animateBG 10s linear infinite;
}
@keyframes animateBG{
    /* 这里通过hue-rotate进行一个色调360度不断旋转 
    ?对边框也有影响，但是背景设置为纯黑纯白时不会改变背景
    */
    0%{
        /* filter --->将模糊或颜色偏移等图形效果 */
        /* hue-rotate()-->改变图像的整体色调 */
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}
section .loader{
    position: relative;
    width: 120px;
    height: 120px;
    /* border: 1px solid darkblue; */
}
section .loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border: 1px solid yellow; */
    /* !calc() 此 CSS 函数允许在声明CSS属性值时执行一些计算 */
    /* 
    .foo {
        --widthA: 100px;
        --widthB: calc(var(--widthA) / 2);
        --widthC: calc(var(--widthB) / 2);
        width: var(--widthC);
    }
    var(--widthA)  获取到叫 --widthA 的属性
    ! --i:2 --->i的值设置为2  那么var(--i)获取到的值就为2
    相当于把  calc( ( 100px / 2) / 2) 计算出的值（25px） 赋值给width属性
    */
    transform: rotate(calc(18deg * var(--i)));
    /* 360度 ➗ 20个span = 18 deg    每个span旋转18度，将20个span转成一个圆*/
}

/* ! 20个span，::before形成20个圆点 */
section .loader span::before{
    content: '';
    position: absolute;
    /* border: 1px solid red; */
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #06b3df;
    /* 给每个span套上阴影，阴影逐渐扩大到100px范围 */
    box-shadow: 0 0 10px #06b3df,
                0 0 20px #06b3df,
                0 0 40px #06b3df,
                0 0 60px #06b3df,
                0 0 80px #06b3df,
                0 0 100px #06b3df;

    animation: animate 2s linear infinite;
    /*!圆点逐个缩小，造成圆形消失，以达到滚动的视觉效果 */
    /* 通过延时每个圆点的缩小执行间隔时间，一个接一个缩小圆点 */
    animation-delay: calc(0.1s *var(--i));
}
/* !用于缩小圆点，形成消失的效果 */
@keyframes animate{
    0%{
        transform: scale(1);
    }
    80%,100%{
        transform: scale(0);
    }
}